<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>java学习</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>

</head>
<body>
<div id="app">
    <!--修改背景颜色为粉色-->
    <el-container style="background-color: #ffe4e1;">
        <!--修改标题字体为楷体-->
        <el-header style="font-family: KaiTi; font-size: 36px;">樊的小站</el-header>
        <el-main>
            <!--添加背景图为山水画-->
            <div style='background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/%E5%85%AB%E5%A4%A7%E5%B1%B1%E6%B0%B4%E5%9B%BE.jpg/800px-%E5%85%AB%E5%A4%A7%E5%B1%B1%E6%B0%B4%E5%9B%BE.jpg"); background-repeat: no-repeat; background-size: cover;'>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="描述"
                            border=true
                            align=center
                            header-align=center
                    >
                    </el-table-column>
                    <el-table-column
                            prop="url"
                            label="入口"
                            border=true
                            align=center
                            header-align=center
                    >
                        <template slot-scope="scope">
                            <el-button type="success"  @click="to(scope.row.url)">立即前往</el-button>

                    </template>

                    </el-table-column>
                </el-table>

            </div>

        </el-main>

        <!--在页脚添加诗句-->
        <el-footer style='font-family: KaiTi; font-size: 24px;'></el-footer>
    </el-container>


</div>
</body>

<script>

    var app=new Vue({
        el:"#app",
        data:{
            tableData: []
        },created(){
          this.init()
        },
        methods:{
            to(url){
                window.location.href=url
            },
            init(){
                axios.post("main/work").then(result => {
                    this.tableData=result.data.data
                })
            }
        }
    })
</script>
<style>
    body{background-color: #ffe4e1;}
</style>
</html>